import "./style.scss";
import "../../comm.scss";
import React,{ Component } from 'react';
import Cesium from "cesium/Cesium";
import L from "leaflet";
import "leaflet-velocity";
import { Button } from 'antd';
import { connect } from "react-redux";

class OceanCurrent extends Component {
    addOceanCurrent = async() => {
        const { viewer } = this.props;
        const response = await fetch("data/wind-gbr.json");
        const data = await response.json();

        let velocityLayer = L.velocityLayer({
            displayValues : true,
            displayOptions : {
                velocityType : 'GBR Wind',
                displayPosition : 'bottomleft',
                displayEmptyString : 'No wind data'
            },
            data : data,
            maxVelocity : 10
        });

        console.log(velocityLayer);

        // let imageryLayer = new Cesium.SingleTileImageryProvider({
        //     url : this.convertCanvasToImage(velocityLayer)
        // });
        // viewer.flyTo(imageryLayer);
    };

    render(){
        return (
            <div className="btn">
                <Button onClick={this.addOceanCurrent.bind(this)}>添加洋流(开发中...)</Button>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    viewer : state.App.viewer
});

export default connect(mapStateToProps,{})(OceanCurrent);